<template>
  <div v-loading="loading">
    <div class="content-header">
      <span class="content-header__titile">人员档案信息</span>
      <div class="content-header__action">
        <el-input v-model="userQuery.searchQuery"> </el-input>
        <el-button type="primary" @click="getUserView">查询</el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button type="danger" @click="handleDelete">删除</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="accountNo" label="用户账号" width="180">
      </el-table-column>
      <el-table-column prop="realName" label="用户名称" width="180">
      </el-table-column>
      <el-table-column prop="updateUser" label="更新人" width="180">
      </el-table-column>
      <el-table-column label="更新时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            $dayjs(scope.row.updateDate).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" width="180">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <user-add ref="add" @handleAddSuccess="handleAddSuccess"></user-add>
    <user-edit ref="edit" @handleEditSuccess="handleEditSuccess"></user-edit>
    <user-view ref="view"></user-view>
  </div>
</template>

<script>
import * as api from "@/api/user";
import { add, edit, view } from "./modules";
export default {
  components: {
    "user-add": add,
    "user-edit": edit,
    "user-view": view,
  },
  data() {
    return {
      tableData: [],
      selectRowData: [],
      userQuery: {
        searchQuery: "",
        currentPage: 1,
        pageSize: 20,
        totalCount: 0,
      },
      loading: false,
    };
  },
  methods: {
    getUserView() {
      this.loading = true;
      api
        .getUserList(this.userQuery)
        .then((res) => {
          this.tableData = res;
        })
        .catch((err) => {
          this.$Message.error(this.$t(err.message));
        })
        .finally(() => {
          this.loading = false;
        });
    },

    handleAdd() {
      this.$refs.add.show();
    },

    handleAddSuccess() {
      this.getUserView();
    },

    handleEdit(record) {
      this.$refs.edit.show(record.accountNo);
    },

    handleEditSuccess() {
      this.getUserView();
    },

    handleView(record) {
      this.$refs.view.show(record.accountNo);
    },

    handleDelete() {
      if (!this.selectRowData || this.selectRowData.length == 0) {
        this.$message({
          message: "没有选择需要删除的人员",
          type: "warning",
        });
        return;
      }

      api
        .deleteUser(this.selectRowData)
        .then(() => {
          this.$notify({
            title: "",
            message: "人员成功删除",
            position: "bottom-right",
          });
          this.getUserView();
        })
        .catch(() => {});
    },

    handleSelectionChange(val) {
      this.selectRowData = val;
    },
  },
  mounted() {
    this.getUserView();
  },
};
</script>